<template>
  <div class="seller">
    <scroller>
      <div class="overview">
        <h1 class="name">{{seller.name}}</h1>
        <div class="desc">
          <star :score="seller.score"
                :size="36"
                class="star"></star>
          <span class="text">{{seller.ratingCount}}</span>
          <span class="text">月销售量</span>
        </div>
        <div class="remark">
          <div class="block">
            <h1>起送价</h1>
            <div class="content">
              <span class="stress">{{seller.minPrice}}</span>元
            </div>
          </div>
          <div class="block">
            <h1>配送费</h1>
            <div class="content">
              <span class="stress">{{seller.deliveryPrice}}</span>元
            </div>
          </div>
          <div class="block">
            <h1>平均配送时间</h1>
            <div class="content">
              <span class="stress">{{seller.deliveryTime}}</span>元
            </div>
          </div>
        </div>
      </div>
      <div class="split"></div>
      <div class="bulletin">
        <h1 class="title">公告与活动</h1>
        <div class="content-wrapper">
          <p class="content">{{seller.bulletin}}</p>
        </div>
        <ul class="supports">
          <li v-for="(item,index) in seller.supports"
              :key="index"
              class="support">
            <span class="icon"
                  :class="classMap[item.type]"></span>
            <span class="text">{{item.description}}</span>
          </li>
        </ul>
      </div>
      <div class="split"></div>
      <div class="pics">
        <h1 class="title">商家实景</h1>
        <div class="pic-wrapper">
          <div class="pic-list">
            <div v-for="(item,index) in seller.pics"
                 :key="index"
                 class="pic-item">
              <img :src="item"
                   width="120"
                   height="90">
            </div>
          </div>
        </div>
      </div>
      <div class="split"></div>
      <div class="info">
        <h1 class="title">商家信息</h1>
        <div>
          <p class="content"
             v-for="(item,index) in seller.infos"
             :key="index">{{item}}</p>
        </div>
      </div>
    </scroller>
  </div>
</template>
<script>
import star from '../star/star.vue'
export default {
  props: ['seller'],
  components: {
    star
  },
  data () {
    return {
      classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special']
    }
  }

}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl';

.seller {
  position: absolute;
  top: 190px;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;

  .overview {
    padding: 18px;

    .name {
      margin-bottom: 8px;
      line-height: 14px;
      font-size: 14px;
      color: #07111b;
    }

    .desc {
      padding-bottom: 18px;
      font-size: 0px;

      .star {
        display: inline-block;
        margin-right: 8px;
        vertical-align: top;
      }

      .text {
        margin-right: 12px;
        vertical-align: top;
        line-height: 18px;
        font-size: 10px;
        color: #4d555d;
      }
    }

    .remark {
      display: flex;
      margin-top: 18px;

      .block {
        flex: 1;
        text-align: center;
        border-right: 1px solid rgba(7, 17, 27, 0.1);

        .content {
          line-height: 24px;
          font-size: 10px;
          color: #07111b;

          .stress {
            font-size: 24px;
          }
        }
      }
    }
  }

  .split {
    width: 100%;
    height: 16px;
    border-top: 1px solid rgba(7, 17, 27, 0.1);
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    background: #f3f5f7;
  }

  .bulletin {
    padding: 18px;

    .title {
      margin-bottom: 8px;
      line-height: 14px;
      font-size: 14px;
      color: #07111b;
    }

    .content-wrapper {
      padding: 0 12px 16px 12px;

      .content {
        line-height: 24px;
        font-size: 12px;
        color: #f01414;
      }
    }

    .supports {
      padding: 0 12px;

      .support {
        margin-bottom: 12px;

        .text {
          line-height: 16px;
          font-size: 12px;
        }

        .icon {
          display: inline-block;
          width: 16px;
          height: 16px;
          background-size: 16px 16px;
          background-repeat: no-repeat;
          vertical-align: middle;
        }

        .decrease {
          bg_image('decrease_4');
        }

        .discount {
          bg_image('discount_4');
        }

        .guarantee {
          bg_image('guarantee_4');
        }

        .invoice {
          bg_image('invoice_4');
        }

        .special {
          bg_image('special_4');
        }
      }
    }
  }

  .pics {
    padding: 18px;

    .title {
      margin-bottom: 12px;
      line-height: 14px;
      font-size: 14px;
      color: #07111b;
    }

    .pic-wrapper {
      .pic-list {
        display: flex;

        .pic-item {
          flex: auto;
          margin-right: 6px;
          width: 120px;
          height: 90px;
        }
      }
    }
  }

  .info {
    padding: 18px;

    .title {
      margin-bottom: 12px;
      line-height: 14px;
      font-size: 14px;
      color: #07111b;
    }

    .content {
      padding: 16px 12px;
      line-height: 16px;
      font-size: 12px;
    }
  }
}
</style>
